<template>
	<view class="page">
		<!-- 轮播图 start -->
		<swiper :indicator-dots="true" :autoplay="true" class="advertise" interval="3000">
			<swiper-item v-for="(advertise, ind) in advertises" :key="ind">
				<image :src="advertise.pic" class="advertise"></image>
			</swiper-item>
		</swiper>
		<!-- 轮播图 end -->
		
		<!-- 标签栏 start -->
		<view class="icon-out">
			<view class="icon-box">
				<view class="icon-in" v-for="(title, ind) in titles" :key="ind">
					<view :class="title.icon" style="font-size: 25px; color: #FD994B; line-height: 25px;"></view>
					<view class="icon-text">{{title.title}}</view>
				</view>
			</view>
		</view>
		<!-- 标签栏 end -->
		
		<!-- 通知栏 start -->
		<view class="notice-box">
			<view class="nitice-left">
				<view class="notice-icon iconfont icon-laba"></view>
				<view class="notice-text">自营家电清洗服务上线</view>
			</view>
			<view class="notice-right">
				<button type="primary" class="notice-button">详情</button>
			</view>
		</view>
		<!-- 通知栏 end -->
		
		<!-- 品牌推荐 start -->
		<view class="recom-box">
			<view class="recom-title">
				<view class="title-text">
					品牌制造商直供
				</view>
				<view class="recom-icon-box">
					<view class="icon-text">更多推荐</view>
					<view class="icon-icon iconfont icon-xiangyou"></view>
				</view>
			</view>
			<view class="brand-box">
				<view class="brand-item" v-for="(brand, ind) in brands" :key="ind">
					<view class="brand-head">
						<view class="head-title">
							<view class="head-text">
								{{brand.brandName}}
							</view>
							<view class="head-price">
								2999
							</view>
						</view>
						<view class="head-tag">
							上新
						</view>
					</view>
					<image class="brand-image" src="../../static/mall/rep.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 品牌推荐 end -->
		
		<!-- 秒杀推荐 start -->
		<view class="touch-box">
			<view class="touch-title">
				<view class="touch-text">
					<view class="touch-one">秒杀专区</view>
					<view class="touch-two">下一场18：00开始</view>
				</view>
				<view class="touch-icon-box">
					<view class="touch-icon-text">本场结束剩余</view>
					<view class="button-box">
						<button type="primary" class="touch-button">00</button>
						<view class="maohao">:</view>
						<button type="primary" class="touch-button">20</button>
						<view class="maohao">:</view>
						<button type="primary" class="touch-button">56</button>
					</view>
				</view>
			</view>
			<view class="pro-box">
				<view class="touch-item" v-for="(ne, ind) in news" :key="ind">
					<view class="tag-price">￥299</view>
					<image class="touch-image" src="../../static/mall/rep.png" mode=""></image>
					<view class="pro-price">秒杀价￥99</view>
					<view class="pro-name">{{ne.productName}}</view>
					<view class="pro-desc">薄如蝉翼，丝滑如肌肤</view>
				</view>
			</view>
		</view>
		<!-- 秒杀推荐 end -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				advertises: [],
				brands: [],
				news: [],
				titles: [{title: '话题', icon: 'iconfont icon-liaotian'}, {title: '优选', icon: 'm-icon iconfont icon-hua'}, 
					{title: '特惠', icon: 'm-icon iconfont icon-libao'}, {title: '签到', icon: 'm-icon iconfont icon-xing'}]
			}
		},
		onShow() {
			uni.setTabBarBadge({
				index: 3,
				text: '3'
			})
			uni.setTabBarBadge({
				index: 2,
				text: '5'
			})
			var me = this;
			//请求轮播图数据
			uni.request({
				url: this.serverUrl + 'home/advertise/list?pageSize=4&pageNum=1', //仅为示例，并非真实接口地址。
				method: "GET",
				success: (res) => {
					//获取数据前判断响应状态码
					if(res.data.code == 200){
						var advertises = res.data.data.list;
						me.advertises = advertises;
					}
				}
			});
			//请求品牌推荐数据
			uni.request({
				url: this.serverUrl + 'home/brand/list?pageSize=4&pageNum=1', //仅为示例，并非真实接口地址。
				method: "GET",
				success: (res) => {
					//获取数据前判断响应状态码
					if(res.data.code == 200){
						var brands = res.data.data.list;
						me.brands = brands;
					}
				}
			});
			//请求秒杀推荐数据
			uni.request({
				url: this.serverUrl + 'home/newProduct/list?pageSize=4&pageNum=1', //仅为示例，并非真实接口地址。
				method: "GET",
				success: (res) => {
					//获取数据前判断响应状态码
					if(res.data.code == 200){
						var news = res.data.data.list;
						me.news = news;
					}
				}
			});
		},
		//监听导航栏按钮
		onNavigationBarButtonTap(e) {
			var index = e.index;
			var me= this;
			if (index == 0){
				uni.navigateTo({
					url: '../message/message'
				})
			} else if (index == 1){
				// var webView = this.$mp.page.$getAppWebview();
				console.log(this)
				console.log(this.$mp.page)
			} else if(index == 2){
				uni.navigateTo({
					url: '../search/search'
				})
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	@import url("home.css");
	@import url("../../static/iconfont/iconfont.css");
</style>
